<template>
	<view>
		<u-card :show-head="false" padding="30" margin="20rpx" :foot-border-top="false">
			<view class="" slot="body">
				<u-form :model="form" ref="uForm" label-width="180">
					<u-form-item label="实际装车日期:" :border-bottom="false" prop="reallyLoadData"
						v-if="railwayTransportation">
						<u-input v-model="form.reallyLoadData" @click="openDatePicker('reallyLoadData')"
							placeholder="请选择实际装车日期" border type="select" />
					</u-form-item>
					<u-form-item label="车皮号:" :border-bottom="false" prop="trainShell" v-if="railwayTransportation">
						<u-input v-model="form.trainShell" border />
					</u-form-item>
					<!-- <u-form-item label="发站:" :border-bottom="false" prop="trainSendLocation"
						v-if="railwayTransportation">
						<u-input v-model="form.trainSendLocation" border />
					</u-form-item>
					<u-form-item label="到站:" :border-bottom="false" prop="trainTargetLocation"
						v-if="railwayTransportation">
						<u-input v-model="form.trainTargetLocation" border />
					</u-form-item> -->
					<u-form-item label="发站:" :border-bottom="false" prop="trainSendLocationTxt"
						v-if="railwayTransportation">
						<u-input v-model="form.trainSendLocationTxt" @click="openPicker('trainSendLocation')"
							placeholder="请选择发站" border type="select" />
					</u-form-item>
					<u-form-item label="到站:" :border-bottom="false" prop="trainTargetLocationTxt"
						v-if="railwayTransportation">
						<u-input v-model="form.trainTargetLocationTxt" @click="openPicker('trainTargetLocation')"
							placeholder="请选择到站" border type="select" />
					</u-form-item>
					<u-form-item label="铁路批车数:" :border-bottom="false" prop="trainBatchNum"
						v-if="railwayTransportation">
						<u-input v-model="form.trainBatchNum" border />
					</u-form-item>
					<u-form-item label="装货日期:" :border-bottom="false" prop="loadDate" v-if="oceanShipping">
						<u-input v-model="form.loadDate" @click="openDatePicker('loadDate')" placeholder="请选择装货日期"
							border type="select" />
					</u-form-item>
					<u-form-item label="船舶:" :border-bottom="false" v-if="oceanShipping">
						<u-input v-model="form.boat" border />
					</u-form-item>
					<u-form-item label="开船日期:" :border-bottom="false" prop="departureDate" v-if="oceanShipping">
						<u-input v-model="form.departureDate" @click="openDatePicker('departureDate')"
							placeholder="请选择开船日期" border type="select" />
					</u-form-item>
					<u-form-item label="提单号:" :border-bottom="false" prop="deliverNo" v-if="oceanShipping">
						<u-input v-model="form.deliverNo" border />
					</u-form-item>
					<!-- <u-form-item label="起运港:" :border-bottom="false" prop="sendLocation" v-if="oceanShipping">
						<u-input v-model="form.sendLocation" border />
					</u-form-item>
					<u-form-item label="目的港:" :border-bottom="false" prop="targetLocation" v-if="oceanShipping">
						<u-input v-model="form.targetLocation" border />
					</u-form-item> -->
					<u-form-item label="起运港:" :border-bottom="false" prop="sendLocationTxt" v-if="oceanShipping">
						<u-input v-model="form.sendLocationTxt" @click="openPicker('sendLocation')" placeholder="请选择起运港"
							border type="select" />
					</u-form-item>
					<u-form-item label="目的港:" :border-bottom="false" prop="targetLocationTxt" v-if="oceanShipping">
						<u-input v-model="form.targetLocationTxt" @click="openPicker('targetLocation')"
							placeholder="请选择目的港" border type="select" />
					</u-form-item>
					<u-form-item label="罐箱号:" :border-bottom="false" prop="containerNo">
						<u-input v-model="form.containerNo" border />
					</u-form-item>
					<u-form-item label="箱量:" :border-bottom="false" prop="boxCapacity">
						<u-input v-model="form.boxCapacity" border />
					</u-form-item>
				</u-form>
			</view>
			<view class="u-footer" slot="foot">
				<u-button plain size="medium" @click="back">返回</u-button>
				<u-button type="primary" size="medium" @click="submit">提交</u-button>
			</view>
		</u-card>
		<u-toast ref="uToast" />
		<u-picker mode="time" v-model="datePicker" :params="dateParams" :default-time="defaultTime"
			@confirm="dateConfirm"></u-picker>
		<u-picker mode="selector" v-model="show" :default-selector="defaultSelector" :title="pickerTitle"
			:range="selectorObj" :range-key="rangeKey" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demandId: '',
				orderType: '',
				form: {
					reallyLoadData: '',
					trainShell: '',
					trainSendLocation: '',
					trainTargetLocation: '',
					trainBatchNum: '',
					loadDate: '',
					departureDate: '',
					boat: '',
					deliverNo: '',
					sendLocation: '',
					targetLocation: '',
					boxCapacity: '',
					containerNo: '',
					trainSendLocationTxt: '',
					trainTargetLocationTxt: '',
					sendLocationTxt: '',
					targetLocationTxt: ''
				},
				datePicker: false,
				dateType: '', //日期选择返回判断是表单哪个字段
				defaultTime: '', //默认日期
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					timestamp: true,
				},
				rules: {
					reallyLoadData: [{
						required: true,
						message: '请选择实际装车日期',
						trigger: 'blur,change'
					}],
					trainShell: [{
						required: true,
						message: '请输入车皮号',
						trigger: 'blur'
					}],
					trainSendLocationTxt: [{
						required: true,
						message: '请选择发站',
						trigger: 'blur,change'
					}],
					trainTargetLocationTxt: [{
						required: true,
						message: '请选择到站',
						trigger: 'blur,change'
					}],
					trainBatchNum: [{
						required: true,
						message: '请输入铁路批车数',
						trigger: 'blur'
					}],
					loadDate: [{
						required: true,
						message: '请选择装货日期',
						trigger: 'blur,change'
					}],
					departureDate: [{
						required: true,
						message: '请选择开船日期',
						trigger: 'blur,change'
					}],
					deliverNo: [{
						required: true,
						message: '请输入提单号',
						trigger: 'blur'
					}],
					sendLocationTxt: [{
						required: true,
						message: '请选择起运港',
						trigger: 'blur,change'
					}],
					targetLocationTxt: [{
						required: true,
						message: '请选择目的港',
						trigger: 'blur,change'
					}],
					containerNo: [{
						required: true,
						message: '请输入罐箱号',
						trigger: 'blur'
					}],
					boxCapacity: [{
						required: true,
						message: '请输入箱量',
						trigger: 'blur'
					}],
				},
				portList: [], //港口列表
				stationList: [], //车站列表
				selectorObj: [], //当前打开的选择列表
				show: false, //选择显示
				rangeKey: 'describe', //选择列表展示的字段
				pickerType: '', //选择列表选择返回判断是表单哪个字段
				pickerTitle: '港口',
			}
		},
		onLoad(option) {
			if (option) {
				this.demandId = option.demandId
				this.orderType = option.orderType
				uni.showLoading()
				this.$u.api.carrier.getCompletionInfo({
					demandId: this.demandId,
				}).then(data => {
					uni.hideLoading()
					if (data.code === 200 && data.success) {
						this.form = {
							...this.form,
							...data.data
						}
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onShow() {
			this.getStationList()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed: {
			//海运
			oceanShipping() {
				return this.orderType === "ZFB1" || this.orderType === "ZFB2";
			},
			//铁运
			railwayTransportation() {
				return this.orderType === "ZFO3" || this.orderType === "ZFO9";
			},
			//选择器默认选择
			defaultSelector() {
				try {
					let num = this.selectorObj.findIndex(item => item[this.rangeKey] === this.form[this.pickerType])
					return [num < 0 ? 0 : num]
				} catch (e) {
					return [0]
				}
			}
		},
		methods: {
			//获取车站/港口列表
			getStationList() {
				this.$u.api.carrier.getStation({
					type: 'railwayPlatform'
				}).then(data => {
					if (data.code === 200 && data.success) {
						this.stationList = data.data
					}
				}).catch(() => {})
				this.$u.api.carrier.getStation({
					type: 'port'
				}).then(data => {
					if (data.code === 200 && data.success) {
						this.portList = data.data
					}
				}).catch(() => {})
			},
			//打开选择列表
			openPicker(type) {
				this.pickerType = type
				if (type === 'targetLocation' || type === 'sendLocation') {
					this.selectorObj = this.portList
					this.pickerTitle = '港口'
				} else if (type === 'trainSendLocation' || type === 'trainTargetLocation') {
					this.selectorObj = this.stationList
					this.pickerTitle = '车站'
				}
				this.show = true
			},
			//选择返回
			pickerConfirm(val) {
				this.form[this.pickerType] = this.selectorObj[val[0]].code
				this.form[this.pickerType + 'Txt'] = this.selectorObj[val[0]].describe
			},
			//打开日期选择
			openDatePicker(type) {
				this.dateType = type
				this.datePicker = true
				this.defaultTime = this.form[type]
			},
			//选择日期返回
			dateConfirm(val) {
				this.form[this.dateType] = this.$u.timeFormat(val.timestamp, 'yyyy-mm-dd hh:MM:ss');
			},
			//提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading()
						let updateData = {
							...this.form,
							parentId: this.demandId,
						};
						delete updateData.id
						this.$u.api.carrier.completionInfo({
							...updateData
						}).then(data => {
							uni.hideLoading()
							if (data.code === 200 && data.success) {
								this.$refs.uToast.show({
									title: data.msg,
									type: 'success',
									duration: 1000
								})
								setTimeout(() => {
									this.back()
								}, 1000)
							}
						}).catch(() => {
							uni.hideLoading()
						})
					}
				});
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.u-footer {
		display: flex;
		justify-content: space-between;
	}
</style>
